<extend name="./Application/Home/View/Layout/base.html"/>
<block name="styles">
    <title>在线课堂</title>
    <link href="__PUBLIC__/css/onlineClass.css" rel="stylesheet">
    <link href="__PUBLIC__/css/public.css" rel="stylesheet">
</block>
<block name="content">
    <!--中间部分内容-->
    <div id="board-olClassCtt">
        <!--内容部分-->
        <div class="block-olClassCtt">
            <!--面包屑导航-->
            <div class="area-olNavRoute">
                <div onclick='location.href=""'>首页</div>
                <label>></label>
                <span>在线课堂</span>
            </div>
            <!--内容部分-->
            <div class="area-olBottomCtt">
                <!--左侧内容区域-->
                <div class="area-olBottomCtt-l">
                    <!--检索条件区域-->
                    <div class="area-olBCttL-cond">
                        <!--选择年级-->
                        <div class="item-grade">
                            <h5>年级 :</h5>
                            <label id="0">全部</label>
                            <span id="1">一年级</span>
                            <span id="2">二年级</span>
                            <span id="3">三年级</span>
                            <span id="4">四年级</span>
                            <span id="5">五年级</span>
                            <span id="6">六年级</span>
                            <span id="7">七年级</span>
                            <span id="8">八年级</span>
                            <span id="9">九年级</span>
                        </div>
                        <div class="item-subject">
                            <h5>科目 :</h5>
                            <label id="0">全部</label>
                            <volist name="course" id="vo">
                                <span id="{$vo.id}">{$vo.chn}</span>
                            </volist>
                        </div>
                        <div class="item-school">
                            <label>学校 :</label>
                            <a class="btn-selectSh" href="{:U('Home/Index/online_class')}?filter_school=0"
                               style="color:gray;">全部</a>
                            <div class="btn-selectSh" data-toggle="modal" data-target="#selectSh">选择学校</div>
                            <volist name="ss" id="vo">
                                <span>{$vo.chn}&nbsp;</span>
                            </volist>

                        </div>
                    </div>
                    <!--排序条件选择-->
                    <div class="area-sort">
                        <div class="item-sort <eq name='case[sort]' value='auto' >active-sort</eq> "><a
                                href="{:U('Index/online_class',array('sort' => 'auto'))}">综合排序</a>&nbsp;↓<i></i></div>
                        <div class="item-sort <eq name='case[sort]' value='count' >active-sort</eq> "><a
                                href="{:U('Index/online_class',array('sort' => 'count'))}">观看人数</a>&nbsp;↓<i></i>
                        </div>
                        <div class="item-sort">好评&nbsp;↓<i></i></div>
                        <!--<div class="btn-live" style="margin-left: 15px;" data-status="on">-->
                        <!--<img class="hidden" src="__PUBLIC__/images/checking.png">-->
                        <!--<img src="__PUBLIC__/images/checked.png">-->
                        <!--&nbsp;直播-->
                        <!--</div>-->
                        <!--<div class="btn-video" data-status="off">-->
                        <!--<img src="__PUBLIC__/images/checking.png">-->
                        <!--<img class="hidden" src="__PUBLIC__/images/checked.png">-->
                        <!--&nbsp;录播-->
                        <!--</div>-->
                    </div>
                    <!--介绍卡片区域-->
                    <div class="area-olClassCtt">
                        <volist name="rooms" id="vo">
                            <div class="item-astEle">
                                <img class="ph-person" src="/Uploads{$vo.imgurl}">
                                <div class="item-eleTextI">
                                    <span class="item-eleHd">{$vo.title}</span>
                                    <span class="item-liveTy">{$vo.course_chn}</span>
                                </div>
                                <div class="item-eleTextII">
                                    <span><img
                                            src="__PUBLIC__/images/liver.jpg">&nbsp;<font>{$vo.teacher_name}</font></span>
                                </div>
                            </div>
                        </volist>
                        <!--一个卡片-->

                        <div style="clear: both;"></div>
                    </div>
                </div>
                <!--右侧内容-->
                <div class="area-olBottomCtt-r">
                    <div class="item-classTb-hd">
                        <i></i>课程表
                    </div>
                    <!--课程表-->
                    <ul class="source-rCtt">
                        <volist name="schedule" id="vo">
                            <li>
                                <div class="item-sucrHd">{$vo.title}</div>
                                <div class="item-sucrStatus">
                                    <span style="margin-right: 20px;"><img
                                            src="__PUBLIC__/images/liver.jpg">&nbsp;<font>{$vo.teacher_name}</font></span>
                                    <span><img src="__PUBLIC__/images/time.png">&nbsp;<font>{$vo.createtime|date="Y-m-d",###}</font></span>
                                </div>
                            </li>
                        </volist>


                    </ul>

                    <div class="item-recommend-hd">
                        <i></i>推荐课程
                    </div>
                    <div>
                        <div class="btn-flipUp area-flip up-flip hidden">
                        <span>
                            <img src="__PUBLIC__/images/up.png">
                        </span>
                        </div>
                        <div>

                            <volist name="recommend" id="vo">
                                <!--一个卡片-->
                                <div class="item-claEle">
                                    <img class="ph-claPerson" src="/Uploads{$vo.imgurl}">
                                    <div class="item-eleTextI">
                                        <span class="item-eleHd">{$vo.title}</span>
                                        <span class="item-liveTy">{$vo.course_name}</span>
                                    </div>
                                    <div class="item-eleTextII">
                                        <span><img
                                                src="__PUBLIC__/images/liver.jpg">&nbsp;<font>{$vo.teacher_name}</font></span>
                                    </div>
                                </div>
                            </volist>

                            <div style="clear: both;"></div>
                        </div>
                        <div class="btn-flipDown area-flip sty-flipII">
                            <span><img src="__PUBLIC__/images/down.png"></span>
                        </div>
                    </div>
                </div>
                <!--清除浮动-->
                <div style="clear: both;"></div>
            </div>
            <div style="clear: both;"></div>
        </div>

        <div class="bottom-pager" align="center">
            {$page}
        </div>

        <!--底部分页-->
        <div id="board-bottomPage">
            <ul class="item-bottomPage">
                <label><a href="#">上一页</a></label>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a class="active-bottomPage" href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
                <li><a href="#">10</a></li>
                <label><a href="#">下一页</a></label>
                <label><a href="#">末页</a></label>
            </ul>
        </div>
    </div>
    <!--    模态框    -->
    <!--学校选择模态框-->
    <div class="modal fade" id="selectSh" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="margin: auto;width: 520px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <span class="modal-title" style="color: black;">
                    选择学校
                </span>
                </div>
                <div class="modal-body" style="padding-left: 36px;padding-right: 36px;">
                    <!--选择区域-->
                    <!--<div class="item-area">-->
                    <!--<label>区域：</label>-->
                    <!--<span class="selSh-active">全部</span>-->
                    <!--<span>香洲区</span>-->
                    <!--<span>斗门区</span>-->
                    <!--<span>金湾区</span>-->
                    <!--</div>-->
                    <!--选择年级-->
                    <div class="item-selectSh-grade">
                        <label>年级：</label>
                        <span class="selSh-active" info="allschool">全部</span>
                        <span info="xiaoxue">小学</span>
                        <span info="chuzhong">初中</span>
                    </div>
                    <!--介绍学校区域-->
                    <div class="area-schAst">

                        <!--<div class="item-schAst" data-order="off">-->
                        <!--<img src="__PUBLIC__/images/school.png">-->
                        <!--<div>aaa</div>-->
                        <!--</div>-->

                    </div>
                    <style>
                        /*选择学校的分页*/
                        .area-page {
                            text-align: center;
                            /*border: 1px solid red;*/
                            padding-top: 15px;
                            padding-bottom: 15px;
                        }

                        .area-page span, .area-page label {
                            margin: 0;

                            border-radius: 3px;
                            cursor: pointer;
                        }

                        .area-page span {
                            padding: 3px 12px;
                        }

                        .area-page label {
                            font-weight: normal;
                            padding: 2px 8px;
                        }

                        .area-page span:hover,
                        .area-page label:hover,
                        .page-active {
                            background: rgb(127, 181, 57);
                            color: white;
                        }

                        .area-page span:active,
                        .area-page label:active {
                            background: rgb(106, 152, 46);
                        }

                        .area-btnSelSch {
                            text-align: center;
                            padding-bottom: 10px;
                        }

                        .btn-selSch {
                            font-size: 18px;
                            padding: 7px 50px;
                            border-radius: 5px;
                        }
                    </style>
                    <!--分页-->
                    <div class="area-page">
                        <!--<label class="item-pagePrev">上一页</label>-->
                        <!--<span class="page-active">1</span>-->
                        <!--<span>2</span>-->
                        <!--<span>3</span>-->
                        <!--<span>4</span>-->
                        <!--<label class="page-last">末页</label>-->
                        <!--<label class="item-pageNext">下一页</label>-->

                    </div>
                    <div class="area-btnSelSch">
                        <button type="button" class="btn btn-success btn-selSch">确定</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


</block>

<block name="scripts">
    <script src="__PUBLIC__/js/handlebars-v4.0.5.js"></script>
    <script src="__PUBLIC__/js/onlineClass.js"></script>

    <script id="entry-template" type="text/x-handlebars-template">
        {{#each schools}}
        <div class="item-schAst" data-order="off" data-id="{{id}}">
            <img src="__PUBLIC__{{imgurl}}">
            <div>{{chn}}</div>
        </div>
        {{/each}}
    </script>
    <script type="application/javascript">
        $(function () {
            var grade = "{$case[grade]}";

            if (grade == "") {
                $(".item-grade label").addClass("active-olBCttL");
            } else {
                $(".item-grade label,.item-grade span").filter('#' + grade).addClass("active-olBCttL");
            }

            /*选年级*/
            $(".item-grade label,.item-grade span").click(function () {
                $(".item-grade label,.item-grade span").removeClass("active-olBCttL");
                $(this).addClass("active-olBCttL");
                var grade = $(this).index() - 1;
                window.location.href = "{:U('Index/online_class')}?grade=" + grade;
            });

            var courseId = "{$case[filter_course]}";

            if (courseId == "") {
                $(".item-subject label").addClass("active-olBCttL");
            } else {
                $(".item-subject label,.item-subject span").filter('#' + courseId).addClass('active-olBCttL');
            }

            /*选科目*/
            $(".item-subject label,.item-subject span").click(function () {
                $(".item-subject label,.item-subject span").removeClass("active-olBCttL");
                $(this).addClass("active-olBCttL");
                var course = $(this).attr('id');
                window.location.href = "{:U('Index/online_class')}?filter_course=" + course;
            });

            // 链接是 {:U('Home/Index/getSchools')}/p/1/grade/xiaoxue
            var grade = 'allschool';
            $('#selectSh').on('show.bs.modal', function () {
                ajaxData(1, grade);
            });


            $('.item-selectSh-grade span').click(function () {
                grade = $(this).attr('info');
                ajaxData(1, grade);
            });

            $('body').on('click', '.area-page a', function () {
                var p = $(this).text();
                var current = parseInt($('.area-page .current').text());
                if (p == "<<") {
                    p = current - 1;
                }
                if (p == '>>') {
                    p = current + 1;
                }
                ajaxData(p, grade);
            });

            function ajaxData(p, grade) {
                $('.area-schAst').html("");
                $('.area-page').html("");

                $.ajax({
                    type: "get",
                    url: "{:U('Home/Index/getSchools')}?p=" + p + "&grade=" + grade,
                    datatype: "json",
                    async: false,
                    success: function (returnData, textstatus, xmlhttprequest) {
                        if ($('.area-schAst').children().length < 1) {
                            var source = $("#entry-template").html();
                            var template = Handlebars.compile(source);
                            var html = template(returnData);
                            $('.area-schAst').append(html);

                            $('.area-page').append(returnData.page);
                        }

                    },
                    error: function () {
                        alert('获取数据出错');
                    }
                });
            }

            $('.btn-selSch').click(function () {
                var idList = [];
                $('.area-schAst .item-schAst').each(function () {
                    if ($(this).hasClass('selSh-activeII')) {
                        var id = ($(this).attr('data-id'));
                        idList.push(id);
                    }
                });

                idList = JSON.stringify(idList);

                if (idList.length == 0) return;

                window.location.href = "{:U('Home/Index/online_class')}?filter_school=" + idList;
            });

        });
    </script>
</block>